<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品列表</title>
		<link rel="stylesheet" type="text/css" href="css/shop.css" />
	</head>
	<body>
		<!-- 头部栏 -->
		<header></header>

		<!-- 当前位置 -->
		<div id="current" style="height: 56px;background-color: #555;">
			<h3 id="currentText">
				<a href="#">吉他商店</a>
				<div id="currentT">
					您现在的位置:
					<span class="back">
						<a href="index.html">主页</a>
					</span>
					<span>/</span>
					<span>吉他商店</span>
				</div>
			</h3>
		</div>
		<!-- 主页，商品 -->
		<div id="loginPage">
			<div id="loginPageLeft">
				<div class="cut">
					<span>
						按 <strong>默认排序</strong>
						<ul class="cut1">
							<li>默认排序</li>
							<li>名字</li>
							<li>价格</li>
							<li>日期</li>
							<li>销量</li>
							<li>评分</li>
							<li>相关性</li>
							<li>随机</li>
							<li>宝贝ID</li>
						</ul>
					</span>
					<span>
						显示<strong>20 宝贝每页</strong>
						<ul class="cut2">
							<li>20 宝贝每页</li>
							<li>40 宝贝每页</li>
							<li>60 宝贝每页</li>
						</ul>
					</span>
				</div>
				<ul>
					<li>
						<a href="details.html">
							<img src="img/c1.jpg">
							<span></span>
							<div class="addShop1">
								<h2 class="name">泰勒 Taylor Academy A12E-N 电箱古典吉他</h2>
								<p>已售： 29件</p>
								<span>￥&nbsp;<span class="price">5599.00</span></span>
								<h6>促销中</h6>
							</div>
						</a>
						<div class="addShop2 cart_add" data-id="1" data-url="img/c1.jpg" data-title="泰勒 Taylor Academy A12E-N 电箱古典吉他" data-sum="29" data-price="5599.00" data-cuxiao="促销中">
							<a class="car" href="#">加入购物车</a>
							<a href="#">查看详情</a>
						</div>
					</li>

					<li>
						<a href="details.html">
							<img src="img/c2.jpg">
							<span></span>
							<div class="addShop1">
								<h2>泰勒 Taylor Academy A12 A12E 民谣吉他</h2>
								<p>已售： 83件</p>
								<h6>促销中</h6>
								<span>￥&nbsp;<span>5399.00</span></span>
							</div>
						</a>
						<div class="addShop2 cart_add" data-id="2" data-url="img/c2.jpg" data-title="JIANGZI Taylor Academy A12 A12E 民谣吉他" data-sum="29" data-price="5599.00" data-cuxiao="促销中">
							<a href="#">加入购物车</a>
							<a href="#">查看详情</a>
						</div>
					</li>

					<li>
						<a href="details.html">
							<img src="img/c3.jpg">
							<span></span>
							<div class="addShop1">
								<h2>泰勒 Taylor Academy A10 A10E 民谣吉他</h2>
								<p>已售： 60件</p>
								<h6>促销中</h6>
								<span>￥&nbsp;<span>4999.00</span></span>
							</div>
						</a>
						<div class="addShop2 cart_add" data-id="3" data-url="img/c3.jpg" data-title="LIUCHAUGN Taylor Academy A10 A10E 民谣吉他" data-sum="29" data-price="5599.00" data-cuxiao="促销中">
							<a href="#" >加入购物车</a>
							<a href="#">查看详情</a>
						</div>
					</li>

					<li>
						<a href="details.html">
							<img src="img/c4.jpg">
							<span></span>
							<div class="addShop1">
								<h2>泰勒 Taylor Big Baby BBT 民谣吉他</h2>
								<p>已售： 30件</p>
								<h6>促销中</h6>
								<span>￥&nbsp;<span>4999.00</span></span>
							</div>
						</a>
						<div class="addShop2">
							<a href="#" data-id="4" class="cart_add" data-url="img/c3.jpg" data-title="泰勒 Taylor Academy A10 A10E 民谣吉他" data-sum="29" data-price="5599.00" data-cuxiao="促销中">加入购物车</a>
							<a href="#">查看详情</a>
						</div>
					</li>

					<li>
						<a href="#">
							<img src="img/c5.png">
							<span></span>
							<div class="addShop1">
								<h2>泰勒 Taylor GS Mini-e Bass 电箱木贝斯</h2>
								<p>已售： 8件</p>
								<h6>促销中</h6>
								<span>￥&nbsp;<span>5899.00</span></span>
							</div>
						</a>
						<div class="addShop2">
							<a href="#" data-id="5" class="cart_add" data-url="img/c3.jpg" data-title="泰勒 Taylor Academy A10 A10E 民谣吉他" data-sum="29" data-price="5599.00" data-cuxiao="促销中">加入购物车</a>
							<a href="#">查看详情</a>
						</div>
					</li>

					<li>
						<a href="#">
							<img src="img/c6.jpg">
							<span></span>
							<div class="addShop1">
								<h2>泰勒 Taylor GS MINI-E KOA 相思木 电箱民谣吉他</h2>
								<p>已售： 69件</p>
								<h6>促销中</h6>
								<span>￥&nbsp;<span>6699.00</span></span>
							</div>
						</a>
						<div class="addShop2">
							<a href="#" data-id="6" class="cart_add" data-url="img/c3.jpg" data-title="泰勒 Taylor Academy A10 A10E 民谣吉他" data-sum="29" data-price="5599.00" data-cuxiao="促销中">加入购物车</a>
							<a href="#">查看详情</a>
						</div>
					</li>

					<li>
						<a href="#">
							<img src="img/c7.jpg">
							<span></span>
							<div class="addShop1">
								<h2>Taylor Swift 签名款 Baby TS-BT 单板旅行民谣吉他 34寸</h2>
								<p>已售： 29件</p>
								<h6>促销中</h6>
								<span>￥&nbsp;<span>4299.00</span></span>
							</div>
						</a>
						<div class="addShop2">
							<a href="#">加入购物车</a>
							<a href="#">查看详情</a>
						</div>
					</li>

					<li>
						<a href="#">
							<img src="img/c8.jpg">
							<span></span>
							<div class="addShop1">
								<h2>泰勒 Taylor Baby BT1 电箱民谣吉他</h2>
								<p>已售： 99件</p>
								<h6>促销中</h6>
								<span>￥&nbsp;<span>3099.00</span></span>
							</div>
						</a>
						<div class="addShop2">
							<a href="#">加入购物车</a>
							<a href="#">查看详情</a>
						</div>
					</li>

					<li>
						<a href="#">
							<img src="img/c9.jpg">
							<span></span>
							<div class="addShop1">
								<h2>泰勒 Taylor Baby BT1 BT2 民谣吉他 34寸</h2>
								<p>已售： 61件</p>
								<h6>促销中</h6>
								<span>￥&nbsp;<span>4299.00</span></span>
							</div>
						</a>
						<div class="addShop2">
							<a href="#">加入购物车</a>
							<a href="#">查看详情</a>
						</div>
					</li>

					<li>
						<a href="#">
							<img src="img/c10.png">
							<span></span>
							<div class="addShop1">
								<h2>泰勒 Taylor 110E 电箱民谣吉他</h2>
								<p>已售： 98件</p>
								<h6>促销中</h6>
								<span>￥&nbsp;<span>6499.00</span></span>
							</div>
						</a>
						<div class="addShop2">
							<a href="#">加入购物车</a>
							<a href="#">查看详情</a>
						</div>
					</li>

					<li>
						<a href="#">
							<img src="img/c11.jpg">
							<span></span>
							<div class="addShop1">
								<h2>泰勒 Taylor 717E Builder’s Edition 圆角电箱民谣吉他</h2>
								<p>已售： 4件</p>
								<h6>促销中</h6>
								<span>￥&nbsp;<span>24699.00</span></span>
							</div>
						</a>
						<div class="addShop2">
							<a href="#">加入购物车</a>
							<a href="#">查看详情</a>
						</div>
					</li>

					<li>
						<a href="#">
							<img src="img/c12.jpg">
							<span></span>
							<div class="addShop1">
								<h2>泰勒 Taylor 717E Builder’s Edition 圆角电箱民谣吉他</h2>
								<p>已售： 2件</p>
								<h6>促销中</h6>
								<span>￥&nbsp;<span>27699.00</span></span>
							</div>
						</a>
						<div class="addShop2">
							<a href="#">加入购物车</a>
							<a href="#">查看详情</a>
						</div>
					</li>

					<li>
						<a href="#">
							<img src="img/c13.jpg">
							<span></span>
							<div class="addShop1">
								<h2>泰勒 Taylor 714CE LTD 电箱民谣吉他</h2>
								<p>已售： 3件</p>
								<h6>促销中</h6>
								<span>￥&nbsp;<span>27999.00</span></span>
							</div>
						</a>
						<div class="addShop2">
							<a href="#">加入购物车</a>
							<a href="#">查看详情</a>
						</div>
					</li>



					<li>
						<a href="#">
							<img src="img/c14.jpg">
							<span></span>
							<div class="addShop1">
								<h2>泰勒 Taylor 812CE V-ClASS 角电箱民谣吉他</h2>
								<p>已售： 6件</p>
								<h6>促销中</h6>
								<span>￥&nbsp;<span>25799.00</span></span>
							</div>
						</a>
						<div class="addShop2">
							<a href="#">加入购物车</a>
							<a href="#">查看详情</a>
						</div>
					</li>

					<li>
						<a href="#">
							<img src="img/c15.jpg">
							<span></span>
							<div class="addShop1">
								<h2>Taylor T5Z CLASSIC PRO Standard 民谣电吉他两用</h2>
								<p>已售： 4件</p>
								<h6>促销中</h6>
								<span>￥&nbsp;<span>19499.00</span></span>
							</div>
						</a>
						<div class="addShop2">
							<a href="#">加入购物车</a>
							<a href="#">查看详情</a>
						</div>
					</li>
					<li>
						<a href="#">
							<img src="img/c16.jpg">
							<span></span>
							<div class="addShop1">
								<h2>泰勒 Taylor T5Z Standard  标准款 电吉他 电木吉他</h2>
								<p>已售： 1件</p>
								<h6>促销中</h6>
								<span>￥&nbsp;<span>16799.00</span></span>
							</div>
						</a>
						<div class="addShop2">
							<a class="TJshop" href="#">加入购物车</a>
							<a href="#">查看详情</a>
						</div>
					</li>
				</ul>

				<!-- 翻页 -->
				<div id="nav">
					<span>
						<a href="#">1</a>
					</span>
					<span>
						<a href="#">2</a>
					</span>
					<span>
						<a href="#">3</a>
					</span>

					<p>页面 1 / 3 </p>
				</div>
			</div>

			<div id="loginPageRight">
				<p>
					<img src="img/logo-taylor-guitars.png">
				</p>
				<div id="Tail1"></div>
			</div>

		</div>


		<!-- 页尾 -->
		<div id="Tail"></div>

		<!-- 返回顶部按钮 -->
		<div id="Top"></div>

	</body>
</html>
<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="js/shop.js" type="text/javascript" charset="utf-8"></script> -->
<script src="js/Cookie.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

	let cartAdd = Array.from( document.getElementsByClassName('cart_add') );
	cartAdd.forEach( v => {
		v.onclick = function(){
			// 添加商品
			let goodsId     = this.getAttribute('data-id'),
				goodsUrl    = this.getAttribute('data-url'),
				goodsSum    = this.getAttribute('data-sum'),
				goodsTitle  = this.getAttribute('data-title'),
				goodsPrice  = this.getAttribute('data-price'),
				goodsCuxiao = this.getAttribute('data-cuxiao');
				
				
			let goodsList = getCookie('cart');
			
			if(typeof goodsList == 'undefined'){
				goodsList = [];
			}else{
				goodsList = JSON.parse(goodsList);
			}
			
			console.log(goodsList);
			
			
			// 一个商品一个对像
			// let arr = [];
			let goods = {
				id:goodsId,
				url:goodsUrl,
				sum:goodsSum,
				title:goodsTitle,
				price:goodsPrice,
				cuxaio:goodsCuxiao,
				num:1
			}
			
			goodsList.push(goods);
			
			// 存入cookie
			setCookie('cart',JSON.stringify(goodsList),7);
		}
	});
</script>


<script>
	$("header").load("header.html");
</script>
<script>
	$("#Tail1").load("tail1.html");
</script>
<script>
	$("#Tail").load("tail.html");
</script>
<!-- 返回顶部按钮 -->
<script>
	$("#Top").load("btnReturn.html");
</script>
